<template>
  <el-dialog :close-on-click-modal="false"   :title="form.id ? '编辑' : '新增'" :visible="show" :before-close="close">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="标题" prop="type">
        <el-input v-model="form.title" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select style="width: 100%" v-model="form.type" placeholder="请选择类型" @change="typeChange">
          <el-option v-for="(item, index) in typeList" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="详情" prop="content">
        <!-- <el-input v-model="form.remark" type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" placeholder="请输入"></el-input> -->
        <Editor v-model="form.content" :height="200"></Editor>
      </el-form-item>
      <el-form-item label="谁可见" prop="groupPath">
        <SelectGroup v-model="form.groupPath" @change="onChangeGroup"></SelectGroup>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Editor from '@/components/Editor'
import { add, update } from '@/api/notice';

export default {
    components: {Editor},
  props: {
    /* 显示隐藏 */
    show: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: {}
    }
  },
  watch: {
    item: {
      handler(val) {
        this.form = val || {};
      },
      immediate: true
    },
    show: {
      handler(val) {
        val && this.resetForm('form');
      },
      immediate: true
    }
  },
  data() {
    return {
      form: {},
      typeList: [
        {
          label: '活动',
          value: 1
        },
        {
          label: '新闻',
          value: 2
        },
      ],
      rules: {
        code: [{ required: true, message: '请输入内容', trigger: ['change', 'input'] }]
      }
    };
  },
  methods: {
    typeChange(e) {
      const item = this.typeList.find((item) => item.value == e);
      this.form.type = item.value;
      this.form.typeName = item.label;
    },
    submit() {
      console.log('打印当前编辑：', this.form);
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            update(this.form).then((res) => {
              // 验证成功-编辑
              this.$emit('confirm', this.form);
              this.close();
            });
          } else {
            add(this.form).then((res) => {
              // 验证成功-新增
              this.$emit('confirm', this.form);
              this.close();
            });
          }
        }
      });
    },
    close() {
      this.form = {};
      this.$emit('update:show', false);
    },
    onChangeGroup(data) {
        console.log(data)
        // this.$set(this.form, 'visibleGroup', JSON.stringify([{groupId: data.id, groupPath:data.path, groupName: data.name}]));
        this.$set(this.form, 'groupId', data.id);
        this.$set(this.form, 'groupPath', data.path);
        this.$set(this.form, 'groupName', data.name);
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
}
</style>
